<template>
  <div class="login container">
    <Header>
      <span>注册</span>
    </Header>
    <section>
      <div class="login-tel">
        <input
          type="text"
          v-model="userTel"
          placeholder="请输入手机号"
          pattern="[0-9]*"
        />
      </div>
      <div class="login-code">
        <input
          type="text"
          placeholder="请输入短信验证码"
          pattern="[0-9]*"
          v-model="userCode"
        />
        <button :disabled="disabled" @click="sendCode">{{ codeMsg }}</button>
      </div>
      <div class="login-tel">
        <input
          type="text"
          v-model="userPwd"
          placeholder="请设置密码"
          pattern="[0-9]*"
        />
      </div>
      <div class="login-btn" @click="register">注 册</div>
    </section>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import http from "@/common/api/request";
import { Toast } from "mint-ui";
import Header from "./HeadeR.vue";
import Tabbar from "@/components/common/TabbaR.vue";
export default {
  components: {
    Tabbar,
    Header,
  },
  data() {
    return {
      disabled: false,
      userTel: "",
      code: "",
      userCode: "",
      userPwd: "",
      //验证规则
      rules: {
        userTel: {
          //手机号验证
          rule: /^1[23456789]\d{9}$/,
          msg: "手机号不能为空,并且是11位数字",
        },
        userPwd:{
            rule:/^\w{6,12}$/,
            msg:'密码不能为空而且是6-12位'
        }
      },
      codeNum: 6,
      codeMsg: "获取短信验证码",
    };
  },
  methods: {
    goUserLogin() {
      this.$router.push({
        path: "/UserLogin",
      });
    },
    //获取短信验证码按钮
    sendCode() {
      //验证
      if (!this.validate("userTel")) return;
      //请求短信验证码接口
      http
        .$axios({
          url: "/api/code",
          method: "POST",
          data: {
            phone: this.userTel,
          },
        })
        .then((res) => {
          if (res.success) {
            this.code = res.data;
          }
        });

      //禁用按钮
      this.disabled = true;
      //倒计时
      let timer = setInterval(() => {
        --this.codeNum;
        this.codeMsg = `重新发送 ${this.codeNum}`;
      }, 1000);
      //判断什么时候停止定时器
      setTimeout(() => {
        clearInterval(timer);
        this.codeNum = 6;
        this.disabled = false;
        this.codeMsg = "获取验证码";
      }, 6000);
    },
    //验证信息
    validate(key) {
      let bool = true;
      if (!this.rules[key].rule.test(this[key])) {
        //提示信息
        Toast(this.rules[key].msg);
        bool = false;
        return false;
      }
      return bool;
    },
    //点击注册
    register() {
        //验证密码
        if( !this.validate('userPwd'))  return;
      //判断验证码是否正确
      if (this.code != this.userCode) {
        Toast("验证码不正确");
        return;
      }
      if (this.code == this.userCode) {
        //证明用户输入的短信验证码是正确的
        //发送短信验证码
        http
          .$axios({
            url: "/api/register",
            method: "POST",
            data: {
              phone: this.userTel,
              pwd:this.userPwd
            },
          })
          .then((res) => {
            console.log(res);
          });
      }
    },
    goRegister() {
      this.$router.push({
        path: "/register",
      });
    },
  },
};
</script>

<style scoped lang="scss">
.login {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f5f5f5;
  div {
    margin: 0.2666rem 0;
    width: 8.93333rem;
    height: 1.17333rem;
  }
  input {
    box-sizing: border-box;
    padding: 0 0.26666rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #ffffff;
    line-height: 1.17333rem;
  }
  .login-tel {
    margin-top: 0.8rem;
    input {
      width: 8.93333rem;
    }
  }
  .login-code {
    display: flex;
    input {
      flex: 1;
    }
    button {
      line-height: 1.17333rem;
      background-color: #b0352f;
      padding: 0 0.53333rem;
      border: 0;
      border-radius: 6px;
      color: #fff;
    }
  }
  .login-btn {
    text-align: center;
    line-height: 44px;
    color: #fff;
    border-radius: 6px;
    background-color: #b0352f;
  }
}
</style>